
<template>
    <div class="quizCate">
        <div class="mainBody">
            <div class="nav-keyword">
                当前位置：
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }"
                        >首页</el-breadcrumb-item
                    >
                    <el-breadcrumb-item :to="{ path: '/quizdata' }"
                        >问题库</el-breadcrumb-item
                    >
                    <el-breadcrumb-item>{{ keyWord }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="main">
                <div class="left">
                    <div class="title">#{{ keyWord }}#</div>
                    <div class="wt-list">
                        <div
                            v-for="(item, index) in mainList"
                            :key="index"
                            class="wt-item"
                        >
                            <nuxt-link
                                target="_blank"
                                :to="`/quizdata/${item.id}.html`"
                            >
                                <div class="wt-title">{{ item.title }}</div>
                                <div
                                    class="wt-answer"
                                    v-html="item.answer_content"
                                ></div>
                            </nuxt-link>
                            <div class="wt-bottom">
                                <div class="wt-tags">
                                    <nuxt-link
                                        v-for="(val, idx) in item.keyword"
                                        :key="val + idx"
                                        :to="'/quizdata/quizcate/' + val"
                                        target="_blank"
                                        class="wt-tags-item"
                                        rel="tag"
                                    >
                                        {{ val }}
                                    </nuxt-link>
                                </div>
                                <div class="wt-time">
                                    {{ item.createtime }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="relate-tags">
                        <div class="title">相关标签</div>
                        <div class="tags">
                            <nuxt-link
                                v-for="(item, index) in relateTags"
                                :key="index"
                                :to="'/quizdata/quizcate/' + item"
                                target="_blank"
                                class="tags-item"
                            >
                                <div class="tags-item-title">
                                    {{ item }}
                                </div>
                            </nuxt-link>
                        </div>
                    </div>
                    <div class="recommend-problem">
                        <div class="title">
                            <span class="title1">推荐</span>问题
                        </div>
                        <el-skeleton animated :loading="aboutList.length == 0">
                            <template slot="template">
                                <div
                                    v-for="item in 8"
                                    :key="item"
                                    class="hotItem"
                                >
                                    <el-skeleton-item variant="h1" />
                                </div>
                            </template>
                        </el-skeleton>
                        <nuxt-link
                            v-for="(item, index) in aboutList"
                            :key="index"
                            :to="`/quizdata/${item.id}.html`"
                            target="_blank"
                            class="hotItem fz14 c333 ellipsis1"
                        >
                            {{ item.title }}
                        </nuxt-link>
                    </div>
                    <div class="wx-gzh-con">
                        <img
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzwd-gzh-code.png"
                            alt=""
                        />
                        <div class="wx-gzh-con-text">
                            <div class="wx-gzh-con-title">
                                免费领取<span>问答券</span>
                            </div>
                            关注公众号，免费领取问答券
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getKeywordList, recommend_issue } from "@/assets/api/quizData";
export default {
    name: "quizcate",
    async asyncData({ params }) {
        let data = {
            keyWord: "",
            mainList: [],
            relateTags: [],
            aboutList: [],
        };

        data.keyWord = params.id;

        let res = await getKeywordList({ keyword: data.keyWord });
        if (res.code == 1) {
            for (let item of res.data) {
                item.keyword = item.keyword.split(",");
            }
            data.mainList = res.data;

            data.relateTags = res.data[0].about_key;
        }

        const res1 = await recommend_issue();
        if (res1.code == 1) {
            data.aboutList = res1.data.splice(0, 8);
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            title: this.keyWord + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问题库汇集众多关于财税问题及答案，主要解决财税从业人员在工作当中遇到的各种财税问题，免除您筛选、去杂的烦恼，目前已收录了财税问题6万多条。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问题库",
                },
            ],
        };
    },
    data() {
        return {};
    },
    mounted() {
        // this.getMainList();
        // this.getAboutList();
    },
    methods: {
        async getMainList() {
            const res = await getKeywordList({ keyword: this.keyWord });
            if (res.code == 1) {
                this.mainList = res.data;
                this.relateTags = res.data[0].about_key;
            }
        },

        async getAboutList() {
            const res = await recommend_issue();
            if (res.code == 1) {
                this.aboutList = res.data.splice(0, 8);
            }
        },

        //进详情
        goDetail(item) {
            console.log(item);
            let { href } = this.$router.resolve({
                path: "/quizdata/Detail/" + item.id + "",
            });
            window.open(href, "_blank");
        },
    },
};
</script>

<style lang="scss" scoped>
@import url("@/assets/static/reset.css");
.quizCate {
    .mainBody {
        overflow: hidden;
        width: 1200px;
        min-height: 809px;
        margin: 0 auto;
        padding-bottom: 30px;
        .nav-keyword {
            width: 1200px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #9e9e9e;
        }
        .main {
            display: flex;
            .left {
                margin-top: 17px;
                width: 857px;
                background-color: #fff;
                border-radius: 6px;
                .title {
                    display: flex;
                    align-items: center;
                    padding-left: 30px;
                    height: 86px;
                    font-size: 24px;
                    font-weight: bold;
                    color: #1c87f3;
                    border-bottom: 1px solid #e7e7e7;
                }
                .wt-list {
                    padding-left: 30px;
                    .wt-item {
                        width: 750px;
                        padding: 40px 0 30px;
                        border-bottom: 1px solid #f3f3f3;
                        display: block;
                        .wt-title {
                            display: inline-block;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-size: 16px;
                            font-weight: 600;
                            color: #333333;
                            padding-bottom: 10px;
                            width: 100%;
                            cursor: pointer;
                        }
                        .wt-answer {
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 2;
                            font-size: 14px;
                            color: #999999;
                            cursor: pointer;
                            line-height: 20px;
                            &::v-deep img {
                                display: none;
                            }
                        }
                        &:hover {
                            .wt-title {
                                color: #2675c5;
                            }
                        }

                        .wt-bottom {
                            margin-top: 20px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .wt-tags {
                                display: flex;
                                flex-wrap: wrap;
                                .wt-tags-item {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    // cursor: pointer;
                                    min-width: 30px;
                                    padding: 2px 10px;
                                    height: 26px;
                                    background-color: #f6f6f6;
                                    color: #666;
                                    font-size: 12px;
                                    border-radius: 75px;
                                    margin-right: 8px;
                                    // &:hover {
                                    //     color: #1772f6;
                                    //     background-color: #e7f1fe;
                                    // }
                                }
                            }
                            .wt-time {
                                font-size: 14px;
                                color: #999999;
                            }
                        }
                    }
                }
            }
            .right {
                margin-top: 17px;
                margin-left: 15px;
                width: 325px;
                .relate-tags {
                    background-color: #fff;
                    border-radius: 6px;
                    padding: 24px 25px;
                    .title {
                        font-size: 18px;
                        color: #333;
                        font-weight: bold;
                    }
                    .tags {
                        margin-top: 20px;
                        display: flex;
                        flex-wrap: wrap;
                        .tags-item {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            margin-bottom: 20px;
                            min-width: 30px;
                            padding: 2px 10px;
                            height: 26px;
                            background-color: #f6f6f6;
                            color: #333;
                            font-size: 12px;
                            border-radius: 75px;
                            margin-right: 8px;
                            &:hover {
                                color: #1772f6;
                                background-color: #e7f1fe;
                            }
                        }
                    }
                }
                .recommend-problem {
                    margin-top: 18px;
                    background-color: #fff;
                    border-radius: 6px;
                    padding: 24px 25px 0 25px;
                    .title {
                        font-size: 18px;
                        color: #333;
                        font-weight: bold;
                        margin-bottom: 10px;
                        .title1 {
                            color: #e75151;
                        }
                    }
                    .hotItem {
                        cursor: pointer;
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        border-bottom: 1px solid #f5f5f5;
                        background: #fff;
                        display: block;
                        box-sizing: border-box;
                        &:hover {
                            color: #1c87f3 !important;
                            text-decoration: underline;
                        }
                    }
                }
                .wx-gzh-con {
                    border-radius: 6px;
                    display: flex;
                    align-items: center;
                    padding: 20px 22px;
                    background-color: #ffffff;
                    margin-top: 14px;
                    position: sticky;
                    top: 95px;
                    img {
                        width: 100px;
                        height: 100px;
                        margin-right: 16px;
                    }
                    .wx-gzh-con-text {
                        font-size: 14px;
                        font-family: OPPOSans, OPPOSans;
                        font-weight: 400;
                        color: #666666;
                        line-height: 20px;
                    }
                    .wx-gzh-con-title {
                        font-size: 18px;
                        font-family: OPPOSans, OPPOSans;
                        font-weight: 500;
                        color: #333333;
                        line-height: 20px;
                        padding-bottom: 9px;
                        span {
                            color: #ff4646;
                        }
                    }
                }
            }
        }
    }
}

::v-deep .el-breadcrumb__inner {
    color: #9e9e9e !important;
    font-size: 13px;
    font-weight: normal;
}
</style>